<template>
  <el-container>
    <el-header :style="{ background: background }">
      <Header />
    </el-header>
    <el-container>
      <el-aside width="200px">
        <Menu />
      </el-aside>
      <el-container direction="vertical">
        <Tabs />
        <el-scrollbar style="background-color: #efefef">
          <el-main>
            <router-view v-slot="{ Component, route }">
              <keep-alive v-if="route.meta.isCache">
                <component
                  v-if="route && route.meta && route.meta.isCache"
                  :is="Component"
                  :key="route.name"
                />
              </keep-alive>
              <component
                v-if="route && route.meta && !route.meta.isCache"
                :is="Component"
                :key="route.name"
              />
            </router-view>
          </el-main>
          <!-- <el-footer height="40px">&copy; 2023 Runnor All Rights Reserved.</el-footer> -->
        </el-scrollbar>
      </el-container>
    </el-container>
  </el-container>
</template>

<script setup>
import { useConfigStore } from '@/stores/syscfg'
const { WebSite_LogoBG } = useConfigStore().cfg.config
let background
if (WebSite_LogoBG) {
  if (WebSite_LogoBG.indexOf('#') == 1) {
    background = WebSite_LogoBG
  } else {
    background = 'url(' + WebSite_LogoBG + ')'
  }
} else background = 'rgb(12, 42, 78)'
</script>
<style>
#app {
  width: 100vw;
  height: 100vh;
}
.el-container {
  height: 100%;
}

.el-header {
  display: flex;
  justify-content: space-between;
  padding: 0;
  background-color: rgb(12, 42, 78);
}
.el-footer {
  background-color: #cecece;
  text-align: center;
  line-height: 40px;
}

.el-aside {
  background-color: #2f4056;
}

.el-main {
  background-color: #efefef;
  padding: 0;
}
</style>
